
.subjectList{
    width:280px;
    height:275px;
    background-color:#fff;
    float:left;
    border-radius:10px;
    margin-right:22px;
    margin-bottom:22px;
    position:relative;
}
.subjectList:nth-child(3n){
    margin-right:0;
}
.subjectHover{
    position:absolute;
    left:0;top:0;right:0;bottom:0;
    background-color:#fff;
    border-radius:10px;
    padding-top:58px;
}
.subjectEditorBut{
    width:21px;
    height:21px;
    background:url("../images/bianji.png") no-repeat center;
    background-size:contain;
    position:absolute;
    right:20px;
    top:20px;
}
.subjectList h2{
    font-size:24px;
    line-height:40px;
    text-align:center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding:0 20px;
}
.subjectList h2.on{
    padding-top:14px;
}
.subjectGrade{
    margin-top:22px;
    text-align:center;
}
.subjectGrade i,.subjectGrade span{
    display:inline-block;
    vertical-align:middle;
}
.subjectGrade i{
    width:24px;
    height:24px;
    background:url("../images/gra.png") no-repeat center;
    background-size:contain;
    margin-right:14px;
}
.subjectGrade span{
    font-size:18px;
    color:#666;
    line-height:24px;
}
.subjectStar{
    text-align:center;
    margin-top:10px;
}
.subjectStar ul li{
    display:inline-block;
    width:20px;
    height:20px;
    background:url("../images/star2.png") no-repeat center;
    margin:0 11px;
}
.subjectStar ul li.on{
    background:url("../images/star1.png") no-repeat center;
}
.subjectToggle{
    width:100%;
    height:54px;
    position:absolute;
    left:0;right:0;bottom:0;
    background:url("../images/sj.png") no-repeat left bottom;
    background-size:contain;
    text-align:center;
    transition:all 1s;
}
.subjectToggle button{
    display:inline-block;
    width:168px;
    height:40px;
    border-radius:5px;
    background-color:#6bccbf;
    font-size:18px;
    text-align:center;
    color:#fff;
    opacity:0;
    transition:all 1s;
}

/*.subjectList.on{*/
/*transform:scale(1.0,1.2);*/
/*}*/
.subjectList:hover{
    box-shadow:0 14px 20px #e6e6e6;
}
.subjectList:hover .subjectHover{
    bottom:-10px;
}
.subjectList:hover .subjectToggle{
    background-position:0 200px;
}
.subjectList:hover .subjectToggle button{
    opacity:1;
}